<template>
  <div class="points-strategy-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">⭐ 积分策略管理</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增策略
          </el-button>
        </div>
      </template>

      <!-- 策略列表 -->
      <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="策略名称" width="200" />
        <el-table-column prop="type" label="策略类型" width="150">
          <template #default="{ row }">
            <el-tag>{{ getTypeName(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="rule" label="规则" width="250">
          <template #default="{ row }">
            {{ getRuleText(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="validPeriod" label="积分有效期" width="120">
          <template #default="{ row }">
            {{ row.validPeriod }}天
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.enabled" @change="handleToggle(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="info" @click="handleCopy(row)">复制</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="策略名称">
          <el-input v-model="form.name" placeholder="请输入策略名称" />
        </el-form-item>
        <el-form-item label="策略类型">
          <el-select v-model="form.type">
            <el-option label="消费积分" value="consumption" />
            <el-option label="注册积分" value="register" />
            <el-option label="签到积分" value="checkin" />
            <el-option label="推荐积分" value="referral" />
            <el-option label="生日积分" value="birthday" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="积分规则" v-if="form.type === 'consumption'">
          <el-input-number v-model="form.ratio" :min="0" :precision="2" />
          <span style="margin-left: 10px;">元 = 1积分</span>
        </el-form-item>

        <el-form-item label="固定积分" v-else>
          <el-input-number v-model="form.fixedPoints" :min="0" />
        </el-form-item>

        <el-form-item label="积分有效期">
          <el-input-number v-model="form.validPeriod" :min="0" />
          <span style="margin-left: 10px;">天（0表示永久有效）</span>
        </el-form-item>

        <el-form-item label="启用状态">
          <el-switch v-model="form.enabled" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const tableData = ref([
  { id: 1, name: '消费积分', type: 'consumption', ratio: 10, validPeriod: 365, enabled: true },
  { id: 2, name: '新会员注册', type: 'register', fixedPoints: 100, validPeriod: 0, enabled: true },
  { id: 3, name: '每日签到', type: 'checkin', fixedPoints: 5, validPeriod: 30, enabled: true },
  { id: 4, name: '推荐好友', type: 'referral', fixedPoints: 200, validPeriod: 365, enabled: true },
  { id: 5, name: '生日礼', type: 'birthday', fixedPoints: 500, validPeriod: 30, enabled: true }
])

const dialogVisible = ref(false)
const dialogTitle = ref('新增策略')

const form = reactive({
  name: '',
  type: 'consumption',
  ratio: 10,
  fixedPoints: 0,
  validPeriod: 365,
  enabled: true,
  remark: ''
})

const getTypeName = (type) => {
  const map = {
    consumption: '消费积分',
    register: '注册积分',
    checkin: '签到积分',
    referral: '推荐积分',
    birthday: '生日积分'
  }
  return map[type] || type
}

const getRuleText = (row) => {
  if (row.type === 'consumption') {
    return `每消费${row.ratio}元获得1积分`
  }
  return `获得${row.fixedPoints}积分`
}

const handleAdd = () => {
  dialogTitle.value = '新增策略'
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑策略'
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleCopy = (row) => {
  ElMessage.success('策略已复制')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该策略吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleToggle = (row) => {
  ElMessage.success(row.enabled ? '策略已启用' : '策略已停用')
}

const handleSubmit = () => {
  ElMessage.success('保存成功')
  dialogVisible.value = false
}
</script>

<style scoped>
.points-strategy-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}
</style>

